<template>
  <div>
    <div class="container">
      <div class="tableWraper">
        <!-- 容器1金额 -->
        <div class="money">
          <table>
            <tr>
              <th>总实际到账金额</th>
              <th>总提现金额</th>
            </tr>
            <tr>
              <th>{{ total1() }}</th>
              <th>{{ total2() }}</th>
            </tr>
          </table>
        </div>
        <!-- 容器2查询 -->
        <div class="name_input">
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="姓名">
                  <el-input v-model="formInline.user" placeholder="输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="单位">
                  <el-input v-model="formInline.company" placeholder="输入单位"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button icon="el-icon-search" type @click="chaxun">查询</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="reset"><i class="el-icon-refresh-right">重置</i></el-button>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="exportCurrent()"><i class="el-icon-download">导出数据到Excel</i></el-button>
                </el-form-item>
                <el-form-item>
                  <el-input clearable v-model="search" prefix-icon="el-icon-search" size="mini" placeholder="输入姓名关键字搜索" @input="searchName"/>
                </el-form-item>
              </el-form>
        </div>
        <div class="seachmsg">
          <table>
            <div class="block">
              <span class="demonstration">申请日期</span>
              <el-date-picker
                v-model="value6"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </div>
          </table>
        </div>
      </div>
      <div class="msgtable">
        <div class="btn" width="50%">
          <el-button plain><span>全部</span></el-button>
          <el-button plain><span>提现申请</span></el-button>
          <el-button plain><span>提现中</span></el-button>
          <el-button plain><span>提现成功</span></el-button>
          <el-button plain><span>提现失败</span></el-button>
        </div>
      </div>

      <!-- 容器3msgtable -->
    </div>
    <div class="data">
      <el-table
        id="outTable"
        :data="
          tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        style="width: 100%"
        max-height="250"
        border
      >
        <el-table-column fixed prop="_id" label="ID" width="120">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="idcard" label="身份证" width="120">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="120">
        </el-table-column>
        <el-table-column prop="cash" label="提现金额" width="120">
        </el-table-column>
        <el-table-column prop="getCash" label="实际到账" width="120">
        </el-table-column>
        <el-table-column prop="bankCard" label="银行卡" width="120">
        </el-table-column>
        <el-table-column prop="getDate" label="申请提现时间" width="120">
        </el-table-column>
        <el-table-column prop="cashStatus" label="状态" width="120">
        </el-table-column>
        <el-table-column prop="failed" label="失败原因" width="120">
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 4, 8]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    chaxun() {
      var y = this.formInline.user;
      console.log(this.formInline.user)
      this.newList = this.tableData.filter(function (x) {
        return x.name == y;
      });
    },
    chaxun() {
      var y = this.formInline.user;
      console.log(this.formInline.user)
      this.newList = this.tableData.filter(function (x) {
        return x.name == y;
      });
    },
    onSubmit() {
        console.log('submit!');
    },
    reset(){
      console.log('reset')
    },
    /* 姓名关键字搜索 */
    searchName(search) {
      var newList = [];
      // console.log(search);
      if (search != "") {
        this.tableData.forEach((item) => {
          if (item.name.indexOf(search) != -1) {
            //空字符串包含在所有字符串中，因此控制会返回所有列表
            newList.push(item);
          }
        });
        return (this.tableData = newList);
      } else {
        // return this.newList = this.newList;
      }
    }, //导出当前表格
    exportCurrent: function() {
      var wb = XLSX.utils.table_to_book(document.querySelector("#outTable")); //表格id
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "sheet.xlsx"
        ); //文件名
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    //总金额
    total1() {
      let sum = 0;
      for (let i = 0; i < this.tableData.length; i++) {
        sum += this.tableData[i].getCash;
      }
      return sum;
    },
    total2() {
      let sum = 0;
      for (let i = 0; i < this.tableData.length; i++) {
        sum += this.tableData[i].cash;
      }
      return sum;
    },
  },
  mounted() {
    this.axios
      .post("http://47.108.201.43:3000/api/getWithdrawStatus")
      .then((res) => {
        // console.log(res)
        // console.log(res.data)
        // console.log(res.data.tarArr)
        // console.log('已经挂载')
        // console.log(this.data)this指向不明确undefined
        // console.log(this);
        this.tableData = res.data.tarArr;
      });
    // this.total()
  },
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pagesize: 4,
      input: "",
      value6: "",
      search: "", //搜索关键字
      /* 原始表格数据 */
      oldtableData: [],
      sum: 0,
            formInline: {
          user: '',
          company: ''
        },
    };
  },
};
</script>
<style lang="less" scoped>
.box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
msgtable /deep/ .btn {
  width: 50%;
  float: left;
}
msgtable /deep/ .export-data {
  width: 50%;
  float: left;
}
</style>
